<template>
  <!--
      作者：luoyiming
      时间：2020-06-01
      描述：广告-添加
    -->
  <div class="product-add pb50">
   <!--添加广告-->
    <el-form size="small" :model="form" ref="form" :rules="rules" label-width="100px">
      <div class="common-form">添加广告</div>
      <el-form-item label="广告标题" prop="title"><el-input v-model="form.title" placeholder="请输入广告标题" class="max-w460"></el-input></el-form-item>

      <!-- <el-form-item label="类型" prop="type"><el-input v-model="form.type" placeholder="请输入类型（英文字母，如：index）" class="max-w460"></el-input></el-form-item> -->

      <el-form-item label="类型">
        <el-select size="small" v-model="form.type" placeholder="请选择" @change="chooseType">
          <el-option v-for="(item, index) in ad_type_list" :key="index" :label="item.value" :value="item.key"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="广告图">
        <div>
          <el-button type="primary" @click="openUpload">上传图片</el-button>
          <img :src="path" class="mt10" width="120px;" v-if="isImg" :isImg="isImg" />
          <!--上传图片组件-->
          <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上传图片</Upload>
        </div>
      </el-form-item>
      
      <el-form-item label="图片尺寸"><el-input  v-model="form.img_size" disabled class="max-w460"></el-input></el-form-item>

      <el-form-item label="广告状态">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">显示</el-radio>
          <el-radio :label="0">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="投放区域">
        <el-radio-group v-model="form.region">
          <el-radio :label="1">全部</el-radio>
          <el-radio :label="2">指定商户</el-radio>
        </el-radio-group>
      </el-form-item>

      
      
      <el-form-item label="指定商户" v-if="form.region == 2" >
      <el-button @click="openGetuser" type="button" size="small" >选择商户</el-button>
      <ul class="d-s-s select-user" style="width: 300px; " >
              <li class="mr10 d-c-c d-c p-10-0" v-for="(item,index) in select_list" :key="index">
      
                  <p class="lh18 ww100 text-ellipsis">{{item.name}}</p>
              </li>
            </ul>
      </el-form-item>


      <el-form-item label="设置前置">
        <el-radio-group v-model="form.market">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="排序"><el-input type="number" v-model="form.sort" placeholder="请输入数字" class="max-w460"></el-input></el-form-item>
      <el-form-item label="链接" prop="link_url" >
              <el-row>
                <div class="url-box flex-1">
                  <!--  <span class="key-name">链接地址：</span> -->
                    <el-input v-model="form.link_url" type="text" class="max-w460" style="width: 380px;"></el-input>

                   <el-button type="primary" @click="changeLink()">选择链接</el-button>
                   <div class="tips" id="tips" style="color: #000;">{{tips_Id}}</div>
                   <el-input v-model="form.name" type="hidden" class="max-w460" style="width: 380px;"></el-input>
                </div>
                <div class="url-box ml10" style="float: right;">

                </div>
                </el-row>
      </el-form-item>
      <Setlink v-if="is_linkset" :is_linkset="is_linkset" @closeDialog="closeLinkset">选择链接</Setlink>
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button size="small" type="info" @click="cancelFunc">取消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>

      </div>
    </el-form>

     <!--选择商户-->
     <Supplier :is_open="open_getuser"  @close="closeGetuserFunc"></Supplier>
  </div>
</template>

<script>
import AdApi from '@/api/ad.js';
import Upload from '@/components/file/Upload';
import Setlink from '@/components/setlink/Setlink';
import Supplier from '@/components/supplier/Supplier.vue';
export default {
  components: {
    /*图片上传*/
    Upload: Upload,
    Setlink,
    Supplier
  },
  data() {
    return {
      /*是否上传图片*/
      isupload: false,
      is_linkset: false,
      isImg: false,
      path: '',
      tips_Id:'',
      open_getuser:false,
      /*form表单数据*/
      form: {
        title: '',
        category_id: 0,
        image_id: '',
        sort: 1,
        status: 1,
        link_url:'',
        name:'',
        type:'',
        img_size:'',
        region:1,
        market:0,
        select_list:[]
      },
      select_list:[],
      /*广告类别*/
      catgory: [],
      ad_type_list:[],
      loading: false,
      /*验证规则*/
      rules: {
        title: [{ required: true, message: '请输入广告标题', trigger: 'blur' }],

      }
    };
  },
  created() {
    /*获取列表*/
    this.getCategoryList();
    this.getAdTypeList();
  },
  methods: {


    /*打开获取用户*/
    openGetuser() {
      this.open_getuser = true;
    },

     /*关闭获取用户*/
     closeGetuserFunc(e) {
      if (e.type != 'error') {
        this.select_list = this.select_list.concat(e.params);
        this.form.select_list = this.select_list;
        console.log('商户',this.select_list) 
      }
      this.open_getuser = false;
    },

    chooseType(index) {
      for(let i = 0, len = this.ad_type_list.length; i <len; i++) {
          if(index == this.ad_type_list[i].key){
            this.form.img_size = this.ad_type_list[i].img_size
          }
      }
    },

    /*获取广告类型*/
    getAdTypeList() {
      let self = this;
      let Params = {};

      AdApi.AdType(Params, true)
      .then(res => {
        self.ad_type_list = res.data;
      })
      .catch(error => {

      });
    },

    /*选择链接*/
      changeLink() {
        this.is_linkset = true;
      },

                      /*获取链接并关闭弹窗*/
      closeLinkset(e) {
          //console.log(e);
          this.is_linkset = false;
          if(e !=null){
            this.form.link_url = e.url;
            this.form.name = '链接到' + ' ' + e.type + ' ' + e.name;
            this.tips_Id = '链接到' + ' ' + e.type + ' ' + e.name;
      }

      },
    /*上传*/
    openUpload() {
      this.isupload = true;
    },

    /*获取图片*/
    returnImgsFunc(e) {
      let self = this;
      if (e != null) {
        this.form.image_id = e[0].file_id;
        this.path = e[0].file_path;
        this.isImg = true;
      }
      this.isupload = false;
    },

    /*获取广告类别*/
    getCategoryList() {
      let self = this;
      let Params = {};

      AdApi.toaddAd(Params, true)
        .then(res => {
          self.catgory = res.data.catgory;
          if(self.catgory.length > 0){
            self.form.category_id = self.catgory[0].category_id;
          }
        })
        .catch(error => {

        });
    },

    /*添加广告*/
    onSubmit() {
      let self = this;
      let form = self.form;
      self.$refs.form.validate(valid => {
        if (valid) {
          self.loading = true;
          AdApi.addAd(form, true)
            .then(data => {
              self.loading = false;
              self.$message({
                message: data.msg,
                type: 'success'
              });
              self.$router.push('/operate/market/index');
            })
            .catch(error => {
              self.loading = false;
            });
        }
      });
    },

    /*取消添加，返回广告列表*/
    cancelFunc() {
      this.$router.push({
        path: '/operate/market/index'
      });
    }
  }
};
</script>

<style>
.edit_container {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.ql-editor {
  height: 400px;
}
</style>
